package myJs.common.loadSample

import com.softwaremill.quicklens._
import myJs.Implicits._
import myJs.common.PureInputCp
import myJs.common.loadSample.LoadSample
import myJs.cps.{PureDateTimePickerCp, PureSelectCp, Style}
import myJs.myPkg.reactHookForm.{RegisterOptions, UseFormRT, ValidationValueMessage}
import myJs.tool.Tool
import org.scalajs.dom.File
import shared.pojo.Sample.{CommentData, SampleInfo}
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Fragment
import slinky.core.facade.Hooks.{useEffect, useState}
import slinky.web.html._

import scala.scalajs.js.Date

/**
 * Created by yz on 21/1/2022
 */
@react object LabCp {

  val curPage = LoadSample

  case class Props(
                    useForm: UseFormRT,
                    sampleInfo: SampleInfo,
                    sampleInfoChange: SampleInfo => Unit,
                    files: List[File],
                    filesChange: List[File] => Unit,
                  )

  val component = FunctionalComponent[Props] { props =>

    object FTool {

      def exWareHouseTimeChange = (v: String) => {
        val curSampleInfo = props.sampleInfo.modify(_.lab.exWareHouseTime).setTo(v)
        props.sampleInfoChange(curSampleInfo)
      }

      def wareHouseTimeChange = (v: String) => {
        val curSampleInfo = props.sampleInfo.modify(_.lab.wareHouseTime).setTo(v)
        props.sampleInfoChange(curSampleInfo)
      }

      def amountChange = (v: String) => {
        val curSampleInfo = props.sampleInfo.modify(_.lab.amount).setTo(v)
        props.sampleInfoChange(curSampleInfo)
      }

      def composeChange = (v: String) => {
        val curSampleInfo = props.sampleInfo.modify(_.lab.compose).setTo(v)
        props.sampleInfoChange(curSampleInfo)
      }

      def testerChange = (v: String) => {
        val curSampleInfo = props.sampleInfo.modify(_.lab.tester).setTo(v)
        props.sampleInfoChange(curSampleInfo)
      }

      def bambooLengthChange = (v: String) => {
        val curSampleInfo = props.sampleInfo.modify(_.lab.bambooLength).setTo(v)
        props.sampleInfoChange(curSampleInfo)
      }

      def sexChange = (v: String) => {
        val curSampleInfo = props.sampleInfo.modify(_.lab.sex).setTo(v)
        props.sampleInfoChange(curSampleInfo)
      }

      def serverFilesChange = (vs: List[String]) => {
        val newSampleInfo = props.sampleInfo.modify(_.lab.files).setTo(vs)
        props.sampleInfoChange(newSampleInfo)
      }

    }

    Fragment(

      h4("实验信息"),

      div(className := "form-group",
        label(className := "control-label col-sm-2", "出库时间:"),
        div(className := "col-sm-4",
          PureDateTimePickerCp(name = "exWareHouseTime",
            value = props.sampleInfo.lab.exWareHouseTime,
            onChangeF = FTool.exWareHouseTimeChange, pattern = "yyyy-mm-dd hh:ii")
        ),
        label(className := "control-label col-sm-2", "入库时间:"),
        div(className := "col-sm-4",
          PureDateTimePickerCp(name = "wareHouseTime",
            value = props.sampleInfo.lab.wareHouseTime,
            onChangeF = FTool.wareHouseTimeChange, pattern = "yyyy-mm-dd hh:ii")
        ),
      ),

      div(className := "form-group",
        label(className := "control-label col-sm-2", "样本增耗量:"),
        div(className := "col-sm-4",
          PureInputCp(useForm = props.useForm, name = s"amount", value = props.sampleInfo.lab.amount,
            onChange = FTool.amountChange,
          )
        ),
        label(className := "control-label col-sm-2", "样本组成:"),
        div(className := "col-sm-4",
          PureInputCp(useForm = props.useForm, name = s"compose", value = props.sampleInfo.lab.compose,
            onChange = FTool.composeChange,
          )
        ),
      ),

      div(className := "form-group",
        label(className := "control-label col-sm-2", "实验人员:"),
        div(className := "col-sm-4",
          PureInputCp(useForm = props.useForm, name = s"tester", value = props.sampleInfo.lab.tester,
            onChange = FTool.testerChange,
          )
        ),
        label(className := "control-label col-sm-2", "性别鉴定:"),
        div(className := "col-sm-4",
          PureInputCp(useForm = props.useForm, name = s"sex", value = props.sampleInfo.lab.sex,
            onChange = FTool.sexChange,
          )
        ),
      ),

      div(className := "form-group",
        label(className := "control-label col-sm-2", "咬节长度:"),
        div(className := "col-sm-4",
          PureInputCp(useForm = props.useForm, name = s"bambooLength", value = props.sampleInfo.lab.bambooLength,
            onChange = FTool.bambooLengthChange,
          )
        ),
      ),

      div(className := "form-group",
        label(className := "control-label col-sm-2", "附件:"),
        div(className := "col-sm-8",
          LabAppendSelectCp(files = props.files, filesChange = props.filesChange,
            serverFiles = props.sampleInfo.lab.files, serverFilesChange = FTool.serverFilesChange,
            id = props.sampleInfo.id)
        )
      ),

    )


  }


}
